<template>
    <rx-dialog @handOk="handOk" @cancel="cancel">
        <a-form-model layout="vertical" :rules="rules">
            <a-form-model-item :label="i18n('seal.selSeal','选择印章')" prop="seal">
                <div class="sealCommon-add" @click="openSealDialog">
                    <my-icon type="iconjia"></my-icon>
                    {{i18n('seal.selSeal','选择印章')}}
                </div>
                <div class="sealCommon-img" v-if="sealCommon.seal">
                    <div class="sealCommon-delete" @click="sealDelete()">
                        <my-icon type="icontrash"></my-icon>
                    </div>
                    <img :src="getImagePath(sealCommon.seal)"/>
                </div>
            </a-form-model-item>
            <a-form-model-item :label="i18n('seal.sealNumber','印章切片数量')" prop="quantity">
                <a-input-number style="width: 150px!important;" :placeholder="$ti18('rxForm.name','请输入名称','','input')" v-model="sealCommon.quantity"
                                :min="1"/>
                <span class="sealCommon-span">{{i18n('seal.sealNumberDesc','要盖多少页就切片多少片')}}</span>
            </a-form-model-item>
            <a-form-model-item :label="i18n('seal.skipPage','印章跳过的页码')">
                <a-input :placeholder="$ti18('rxForm.name','请输入名称','','input')" v-model="sealCommon.page"/>
                <span class="sealCommon-span">{{i18n('seal.skipPageDesc','比如要跳过第2页和第5页，则填写2,5;空则没有跳过')}}</span>
            </a-form-model-item>
        </a-form-model>
    </rx-dialog>
</template>

<script>
import SelectSealDialog from "@/views/modules/form/core/PdfDialog/SelectSealDialog";
import {Util,TokenUtil} from "@lowcode/jpaas-common-lib";

export default {
    name: "PagingSealDialog",
    props:["layerid","lydata","destroy","pagingSeal"],
    data(){
        return{
            rules: {
                seal: [{ required:true,message:this.i18n('seal.pleaseSelSeal','请选择印章'), trigger: 'change' }],
                quantity: [{ required:true,message:this.i18n('seal.inputNumber','请输入数量'), trigger: 'change' }],
            },
            sealCommon:{
                seal:'',
                quantity:1,
                page:'',
            }
        }
    },
    created() {
        if(this.pagingSeal){
            this.sealCommon=this.pagingSeal;
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"PdfSealSignature",key);
        },
        openSealDialog() {
            let self = this ;
            let config = {
                curVm: this,
                title:self.i18n('seal.selSeal','选择印章'),
                widthHeight: ['1000px', '600px'],
                component: SelectSealDialog,
            }
            Util.open(config, function (action, data) {
                if(action !='ok'){ return }
                self.sealCommon.seal=data.fileId

            })
        },
        getImagePath(fileId) {
            let accessToken = TokenUtil.getToken();
            let time=new Date().getTime();
            fileId=Util.encryptWord(fileId);
            var isScale=Util.encryptWord(false);
            let url = `/api/api-system/system/core/sysFile/previewImg?fileId=${fileId}&accessToken=${accessToken}&time=${time}&isScale=${isScale}` ;
            return url;
        },
        sealDelete(){
            this.pagingSeal.seal ='';
        },
        handOk(vm){
            Util.closeWindow(this,"ok",this.sealCommon);
        },
        cancel(){
            Util.closeWindow(this,"cancel");
        },
    }
}
</script>

<style scoped>
.sealCommon-img{
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid #dedede;
    margin-top: 20px;
    position: relative;
}
.sealCommon-img img{
    width: 100%;
    height: 100%;
}
.sealCommon-img:hover .sealCommon-delete{
    display: block;
}
.sealCommon-delete{
    position: absolute;
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: red;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    display: none;
}
.sealCommon-add{
    width: 100%;
    height: 38px;
    border-radius: 4px;
    border: solid 1px #dedede;
    display:flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 14px;
    cursor: pointer;
}
.sealCommon-add:hover{
    color: #4285f4;
    border: 1px solid #4285f4;
}
.sealCommon{
    width: 100%;
    padding: 20px;
}
.sealCommon-span{
    display: block;
    color: #909090;
    font-size: 12px;
}
</style>
